<template>
  <div>
    <h1>{{ year }}</h1>
    <button @click="increment">Increment</button>
    <!-- <button @click="obj1++">Increment</button> -->
    <input type="text" v-model="obj1">
    <!-- <div>{{ refObj.a }}</div>
    <div>{{ state }}</div> -->
    obj1: <span>{{ obj1 }}</span>
    <input type="text" v-model="obj1">
    <!-- obj2: <span>{{ obj2.b.c }}</span> -->
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import type { Ref } from 'vue'
const year: Ref<string | number> = ref('2020')
const state = reactive({ count: { a: 1 } })
watch(
  () => state.count,
  () => {
    console.log(12321);

    // fires only when state.someObject is replaced
  },
  { deep: true }
)
const refObj = ref({
  a: 2
})
refObj.value = {
  a: 5
}

let obj1 = 2 // 这个虽然在template上面渲染，但不是响应式属性

function increment() {
  year.value++
  // state.count++
  obj1++
  state.count.a = 3
}


// let state = reactive(obj1)
// state = reactive({ count: 1 })
// obj1 = 9  // 


// inferred type: Ref<number | undefined>
// const n = ref<number>()

// Caveat when Unwrapping in Templates
// 1.Ref unwrapping in templates only applies if the ref is a top-level property in the template render context.
// 2.Unlike reactive objects, there is no unwrapping performed when the ref is accessed as an element of a reactive array or a native collection type like Map:
// 3. is that a ref does get unwrapped if it is the final evaluated value of a text interpolation (i.e. a {{ }} tag), so the following will render 1

// the .value property gives Vue the opportunity to detect when a ref has been accessed or mutated.
// you can think of a ref as an object that looks like this:
// const myRef = {
//   _value: 0,
//   get value() {
//     track()
//     return this._value
//   },
//   set value(newValue) {
//     this._value = newValue
//     trigger()
//   }
// 有点类似于vue2 data属性对象

// you can pass refs into functions while retaining access to the latest value and the reactivity connection
// shallowRefs
// 拓展：如vue2中data或者vue3中ref已经定义了空对象，那么在重新给它赋值一个有深层结构的对象时，它里面每个属性也都是响应式的

// DOM Update Timing
// Vue buffers them until the "next tick" in the update cycle to ensure that each component updates only once no matter how many state changes you have made.

// Limitations of reactive()
// it only works for object types (objects, arrays, and collection types such as Map and Set).
// Cannot replace entire object
// Not destructure-friendly
const testReactive = reactive({
  a: 1
})
const { a } = testReactive // lose reactive 
// the same as function b(testReactive.a
// can use toRefs or toRef to deal this
//  the advantage of reactive：
// A ref is automatically unwrapped when accessed or mutated as a property of a reactive object. In other words, it behaves like a normal property :
// If a new ref is assigned to a property linked to an existing ref, it will replace the old ref:
// Ref unwrapping only happens when nested inside a deep reactive object. It does not apply when it is accessed as a property of a shallow reactive object.


</script>

<!-- other writing -->
<!-- <script lang="ts">
import { ref } from 'vue'

export default {
  setup() {
    // let year = 0
    let year = ref(0)
    function increment() {
      year.value++
      // obj.value.a.b.c++
      // // state.count++
      // obj1++
      // obj2.value.b.c++
    }
    // don't forget to expose the function as well.
    return {
      year,
      increment
    }
  }
}
</script> -->
